<template>
  <div class="lobby-page">
    <!-- 动态背景 -->
    <canvas ref="backgroundCanvas" class="background-canvas"></canvas>
    
    <!-- 浮动粒子 -->
    <div class="floating-particles">
      <div class="particle" v-for="n in 20" :key="'particle-' + n"></div>
    </div>
    
    <!-- 光束动画 -->
    <div class="light-beams">
      <div class="beam beam-1"></div>
      <div class="beam beam-2"></div>
      <div class="beam beam-3"></div>
    </div>

    <!-- 顶部导航 -->
    <nav class="navbar">
      <div class="container">
        <div class="nav-content">
          <div class="logo">
            <div class="logo-icon">🎨</div>
            <h1 class="logo-text">涂色大厅</h1>
          </div>
          <!-- 中间导航按钮 -->
          <div class="nav-buttons">
            <router-link to="/" class="nav-btn" :class="{ active: $route.path === '/' }">
              <div class="nav-icon">🏠</div>
              <span class="nav-text">首页</span>
              <div class="nav-indicator"></div>
            </router-link>
            <router-link to="/lobby" class="nav-btn" :class="{ active: $route.path === '/lobby' }">
              <div class="nav-icon">👥</div>
              <span class="nav-text">房间</span>
              <div class="nav-indicator"></div>
            </router-link>
            <router-link to="/ranking" class="nav-btn" :class="{ active: $route.path === '/ranking' }">
              <div class="nav-icon">🏆</div>
              <span class="nav-text">排行榜</span>
              <div class="nav-indicator"></div>
            </router-link>
          </div>
          <div class="user-info">
            <template v-if="isAuthenticated">
              <div class="user-avatar-wrapper">
                <img :src="getAvatarUrl(userInfo.avatarUrl)" class="avatar" />
                <div class="avatar-glow"></div>
              </div>
              <span class="username">{{ userInfo.username }}</span>
              <router-link to="/profile" class="settings-btn">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2"/>
                  <path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z" stroke="currentColor" stroke-width="2"/>
                </svg>
              </router-link>
            </template>
            <template v-else>
              <router-link to="/auth/login" class="auth-btn login-btn">登录</router-link>
              <router-link to="/auth/register" class="auth-btn register-btn">注册</router-link>
            </template>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <div class="container">
        <!-- 快速操作区域 -->
        <section class="quick-actions-section">
          <h2 class="section-title">快速开始</h2>
          <div class="actions-grid">
            <!-- 创建房间卡片 -->
            <div class="action-card" @click="showCreateRoom">
              <div class="action-background"></div>
              <div class="action-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="action-content">
                <h3>创建房间</h3>
                <p>自定义房间名称和人数限制，邀请好友一起游戏</p>
                <div class="action-btn">
                  <span>创建房间</span>
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </div>
            </div>

            <!-- 快速匹配卡片 -->
            <div class="action-card" @click="quickMatch">
              <div class="action-background"></div>
              <div class="action-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="action-content">
                <h3>快速匹配</h3>
                <p>一键匹配，系统自动为您分配到合适的房间</p>
                <div class="action-btn">
                  <span>开始匹配</span>
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </div>
            </div>

            <!-- 加入房间卡片 -->
            <div class="action-card join-card" @click="focusRoomSearch">
              <div class="action-background"></div>
              <div class="action-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15 3H21V9M9 21H3V15M21 3L14 10M3 21L10 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="action-content">
                <h3>加入房间</h3>
                <p>通过房间ID快速进入指定房间，立即开始游戏</p>
                <div class="join-room-input">
                  <input ref="roomIdInput" v-model="joinRoomId" type="text" placeholder="输入房间ID" class="room-id-input"
                    @keyup.enter="joinSpecificRoom" />
                  <button class="join-btn" @click="joinSpecificRoom">
                    <span>加入</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- 房间列表区域 -->
        <section class="rooms-section">
          <div class="section-header">
            <div class="header-left">
              <h2 class="section-title">房间列表</h2>
              <div class="section-info">
                <span class="info-badge">
                  <span class="badge-icon">🏠</span>
                  <span>{{ availableRoomsCount }} 个可用房间</span>
                </span>
              </div>
            </div>
            <div class="header-right">
              <div class="filter-controls">
                <div class="filter-group">
                  <select v-model="filters.playerCount" class="filter-select">
                    <option value="">所有人数</option>
                    <option value="2">2人房</option>
                    <option value="3">3人房</option>
                    <option value="4">4人房</option>
                    <option value="5">5人房</option>
                    <option value="6">6人房</option>
                  </select>
                </div>
                <div class="filter-group">
                  <select v-model="filters.status" class="filter-select">
                    <option value="">所有状态</option>
                    <option value="waiting">等待中</option>
                    <option value="playing">游戏中</option>
                  </select>
                </div>
                <div class="search-group">
                  <div class="search-box">
                    <svg class="search-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
                      <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <input v-model="searchQuery" type="text" placeholder="搜索房间..." class="search-input" />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 房间卡片列表 -->
          <!-- 加载状态 -->
          <div v-if="isLoadingRooms" class="loading-state">
            <div class="loading-animation">
              <div class="loading-ring"></div>
              <div class="loading-ring"></div>
              <div class="loading-ring"></div>
            </div>
            <p class="loading-text">正在加载房间列表...</p>
          </div>
          
          <!-- 房间列表 -->
          <div v-else class="rooms-grid">
            <div v-for="room in filteredRooms" :key="room.id" class="room-card" 
              :class="{ 'room-full': room.playerCount >= room.maxPlayers, 'room-playing': room.status === 'playing' }" 
              @click="joinRoom(room)">
              
              <!-- 房间背景动画 -->
              <div class="room-background">
                <div class="bg-particles">
                  <div v-for="n in 8" :key="'bg-particle-' + n" class="bg-particle"></div>
                </div>
              </div>

              <!-- 房间状态标签 -->
              <div class="room-status" :class="room.status">
                <div class="status-icon">
                  <span v-if="room.status === 'waiting'">⏱️</span>
                  <span v-else-if="room.status === 'playing'">🎮</span>
                </div>
                <span class="status-text">
                  <span v-if="room.status === 'waiting'">等待中</span>
                  <span v-else-if="room.status === 'playing'">游戏中</span>
                </span>
              </div>

              <!-- 房间信息 -->
              <div class="room-info">
                <h4 class="room-name">{{ room.name }}</h4>
                <p class="room-description">{{ room.description }}</p>

                <!-- 玩家列表 -->
                <div class="players-section">
                  <div class="players-list">
                    <!-- 已加入玩家 -->
                    <div v-for="n in room.playerCount" :key="`player-${n}`" class="player-slot filled">
                      <div class="player-avatar">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                      </div>
                    </div>
                    <!-- 空位置 -->
                    <div v-for="n in Math.max(0, room.maxPlayers - room.playerCount)" :key="`empty-${n}`" class="player-slot empty">
                      <div class="player-avatar">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div class="player-count">
                    {{ room.playerCount }}/{{ room.maxPlayers }}
                  </div>
                </div>

                <!-- 房间底部信息 -->
                <div class="room-footer">
                  <button class="join-room-btn"
                    :class="(room.playerCount >= room.maxPlayers || room.status === 'playing') ? 'disabled' : 'enabled'"
                    :disabled="room.playerCount >= room.maxPlayers || room.status === 'playing'">
                    <div class="btn-content">
                      <span v-if="room.playerCount >= room.maxPlayers" class="btn-text">已满</span>
                      <span v-else-if="room.status === 'playing'" class="btn-text">游戏中</span>
                      <span v-else class="btn-text">加入房间</span>
                      <svg v-if="room.playerCount < room.maxPlayers && room.status !== 'playing'" class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                    <div class="btn-glow"></div>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 空状态 -->
          <div v-if="!isLoadingRooms && filteredRooms.length === 0" class="empty-state">
            <div class="empty-animation">
              <div class="empty-icon">🏠</div>
              <div class="empty-rings">
                <div class="empty-ring"></div>
                <div class="empty-ring"></div>
                <div class="empty-ring"></div>
              </div>
            </div>
            <h3 class="empty-title">暂无可用房间</h3>
            <p class="empty-description">没有找到符合条件的房间，试试创建一个新房间吧！</p>
            <button @click="showCreateRoom" class="empty-action-btn">
              <span>创建房间</span>
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </div>

          <!-- 加载更多房间 -->
          <div v-if="!isLoadingRooms && hasMoreRooms" class="load-more-section">
            <button @click="loadMoreRooms" class="load-more-btn" :disabled="isLoadingMore">
              <div class="load-more-content">
                <div v-if="isLoadingMore" class="loading-dots">
                  <div class="dot"></div>
                  <div class="dot"></div>
                  <div class="dot"></div>
                </div>
                <span v-else class="load-more-text">加载更多房间 ({{ currentPage }}/{{ totalPages }})</span>
              </div>
            </button>
          </div>
          
          <!-- 没有更多房间的提示 -->
          <div v-if="!isLoadingRooms && !hasMoreRooms && rooms.length > 0" class="no-more-rooms">
            <div class="completion-badge">
              <span class="completion-icon">🎯</span>
              <span class="completion-text">已显示所有房间</span>
            </div>
          </div>
        </section>
      </div>
    </main>

    <!-- 创建房间模态框 -->
    <Transition name="modal" appear>
      <div v-if="showCreateModal" class="modal-overlay" @click="closeCreateModal">
        <div class="modal-content" @click.stop>
          <!-- 模态框背景特效 -->
          <div class="modal-background">
            <div class="modal-particles">
              <div v-for="n in 12" :key="'modal-particle-' + n" class="modal-particle"></div>
            </div>
            <div class="modal-glow"></div>
          </div>
          
          <!-- 模态框头部 -->
          <div class="modal-header">
            <div class="modal-title-section">
              <div class="modal-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <h3 class="modal-title">创建房间</h3>
            </div>
            <button @click="closeCreateModal" class="modal-close">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </div>
          
          <!-- 创建房间表单 -->
          <form @submit.prevent="createRoom" class="create-form">
            <!-- 房间名称 -->
            <div class="form-group">
              <label for="roomName" class="form-label">
                <span class="label-icon">🏠</span>
                <span class="label-text">房间名称</span>
                <span class="required-star">*</span>
              </label>
              <div class="input-wrapper">
                <input 
                  id="roomName" 
                  v-model="createForm.name" 
                  type="text" 
                  placeholder="请输入房间名称" 
                  class="form-input" 
                  required 
                  maxlength="20"
                />
                <div class="input-focus-border"></div>
              </div>
            </div>
            
            <!-- 最大人数 -->
            <div class="form-group">
              <label for="maxPlayers" class="form-label">
                <span class="label-icon">👥</span>
                <span class="label-text">最大人数</span>
              </label>
              <div class="player-count-selector">
                <button 
                  type="button"
                  @click="createForm.maxPlayers = Math.max(2, createForm.maxPlayers - 1)"
                  class="count-btn decrease"
                  :disabled="createForm.maxPlayers <= 2"
                >
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  </svg>
                </button>
                <div class="count-display">
                  <span class="count-number">{{ createForm.maxPlayers }}</span>
                  <span class="count-label">人</span>
                </div>
                <button 
                  type="button"
                  @click="createForm.maxPlayers = Math.min(6, createForm.maxPlayers + 1)"
                  class="count-btn increase"
                  :disabled="createForm.maxPlayers >= 6"
                >
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </button>
              </div>
            </div>
            
            <!-- 房间描述 -->
            <div class="form-group">
              <label for="description" class="form-label">
                <span class="label-icon">📝</span>
                <span class="label-text">房间描述</span>
                <span class="optional-text">(可选)</span>
              </label>
              <div class="textarea-wrapper">
                <textarea 
                  id="description" 
                  v-model="createForm.description" 
                  placeholder="请输入房间描述..." 
                  class="form-textarea" 
                  rows="3"
                  maxlength="100"
                ></textarea>
                <div class="textarea-focus-border"></div>
                <div class="char-count">{{ createForm.description.length }}/100</div>
              </div>
            </div>
            
            <!-- 房间类型切换 -->
            <div class="form-group">
              <div class="privacy-toggle-section">
                <div class="privacy-header">
                  <div class="privacy-label">
                    <span class="label-icon">🔐</span>
                    <span class="label-text">房间类型</span>
                  </div>
                </div>
                
                <div class="privacy-options">
                  <div 
                    class="privacy-option" 
                    :class="{ active: !createForm.isPrivate }"
                    @click="createForm.isPrivate = false; createForm.password = ''"
                  >
                    <div class="option-icon">
                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                        <path d="M2 12h20" stroke="currentColor" stroke-width="2"/>
                        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke="currentColor" stroke-width="2"/>
                      </svg>
                    </div>
                    <div class="option-content">
                      <h4>公开房间</h4>
                      <p>所有人可见并加入</p>
                    </div>
                    <div class="option-check">
                      <svg v-if="!createForm.isPrivate" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                  </div>
                  
                  <div 
                    class="privacy-option" 
                    :class="{ active: createForm.isPrivate }"
                    @click="createForm.isPrivate = true"
                  >
                    <div class="option-icon">
                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
                        <circle cx="12" cy="16" r="1" fill="currentColor"/>
                        <path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="currentColor" stroke-width="2"/>
                      </svg>
                    </div>
                    <div class="option-content">
                      <h4>私有房间</h4>
                      <p>需要密码才能加入</p>
                    </div>
                    <div class="option-check">
                      <svg v-if="createForm.isPrivate" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                  </div>
                </div>
                
                <!-- 私有房间密码输入 -->
                <Transition name="password-input">
                  <div v-if="createForm.isPrivate" class="password-input-section">
                    <label for="roomPassword" class="form-label">
                      <span class="label-icon">🔑</span>
                      <span class="label-text">房间密码</span>
                      <span class="required-star">*</span>
                    </label>
                    <div class="input-wrapper">
                      <input 
                        id="roomPassword" 
                        v-model="createForm.password" 
                        type="password" 
                        class="form-input" 
                        placeholder="请输入房间密码" 
                        :required="createForm.isPrivate" 
                        autocomplete="new-password"
                        maxlength="20"
                      />
                      <div class="input-focus-border"></div>
                    </div>
                  </div>
                </Transition>
              </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="form-actions">
              <button type="button" @click="closeCreateModal" class="cancel-btn">
                <span class="btn-text">取消</span>
              </button>
              <button type="submit" class="create-btn" :disabled="isCreating" :class="{ loading: isCreating }">
                <div class="btn-content">
                  <div v-if="isCreating" class="btn-spinner">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="31.416" stroke-dashoffset="31.416">
                        <animate attributeName="stroke-dasharray" dur="2s" values="0 31.416;15.708 15.708;0 31.416" repeatCount="indefinite"/>
                        <animate attributeName="stroke-dashoffset" dur="2s" values="0;-15.708;-31.416" repeatCount="indefinite"/>
                      </circle>
                    </svg>
                  </div>
                  <svg v-else class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <span class="btn-text">{{ isCreating ? '创建中...' : '创建房间' }}</span>
                </div>
                <div class="btn-glow"></div>
              </button>
            </div>
          </form>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user.js'
import { roomAPI } from '@/api/room.js'
// 静态导入所有头像
import avatar1 from '/images/avatar1.png'
import avatar2 from '/images/avatar2.png'
import avatar3 from '/images/avatar3.png'
import avatar4 from '/images/avatar4.png'
import avatar5 from '/images/avatar5.png'
import avatar6 from '/images/avatar6.png'

const router = useRouter()

// 用户状态  
const userStore = useUserStore()
const { userInfo, isAuthenticated } = userStore

// 头像映射
const avatarMap = {
  '1': avatar1,
  '2': avatar2,
  '3': avatar3,
  '4': avatar4,
  '5': avatar5,
  '6': avatar6
}

// 获取头像URL的方法
const getAvatarUrl = (avatarUrl) => {
  // 如果没有avatarUrl或为空，使用默认头像
  const avatarNumber = avatarUrl || '1'
  return avatarMap[avatarNumber] || avatar1
}

// 背景canvas引用
const backgroundCanvas = ref(null)
let animationId = null
let particles = []

// 初始化动态背景
const initDynamicBackground = () => {
  const canvas = backgroundCanvas.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  
  // 设置画布大小
  const resizeCanvas = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }
  
  resizeCanvas()
  window.addEventListener('resize', resizeCanvas)
  
  // 创建粒子系统
  const createParticles = () => {
    particles = []
    for (let i = 0; i < 40; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        size: Math.random() * 2.5 + 0.8,
        speedX: (Math.random() - 0.5) * 1.2,
        speedY: (Math.random() - 0.5) * 1.2,
        opacity: Math.random() * 0.6 + 0.3,
        hue: Math.random() * 80 + 180, // 更广泛的蓝紫色调
        life: Math.random() * 120,
        maxTrailLength: Math.floor(Math.random() * 8) + 5, // 可变轨迹长度
        trail: [],
        type: Math.random() > 0.7 ? 'shooting' : 'floating' // 70%浮动粒子，30%流星
      })
    }
  }
  
  // 动画循环
  const animate = () => {
    // 清除画布，使用深色渐变背景
    const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
    gradient.addColorStop(0, 'rgba(5, 10, 25, 0.15)')
    gradient.addColorStop(0.5, 'rgba(10, 20, 40, 0.1)')
    gradient.addColorStop(1, 'rgba(15, 25, 50, 0.15)')
    
    ctx.fillStyle = gradient
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    
    // 更新和绘制粒子
    particles.forEach((particle, index) => {
      // 根据粒子类型设置不同的运动模式
      if (particle.type === 'shooting') {
        // 流星粒子：快速直线运动
        particle.speedX *= 1.002 // 微弱加速
        particle.speedY *= 1.002
        particle.x += particle.speedX * 1.5
        particle.y += particle.speedY * 1.5
      } else {
        // 普通浮动粒子：缓慢飘动
        particle.speedX += (Math.random() - 0.5) * 0.01 // 随机微调方向
        particle.speedY += (Math.random() - 0.5) * 0.01
        particle.x += particle.speedX * 0.6
        particle.y += particle.speedY * 0.6
      }
      
      // 更新轨迹
      particle.trail.push({
        x: particle.x, 
        y: particle.y,
        time: Date.now()
      })
      
      // 根据粒子类型控制轨迹长度
      while (particle.trail.length > particle.maxTrailLength) {
        particle.trail.shift()
      }
      
      particle.life += particle.type === 'shooting' ? 0.8 : 0.3
      
      // 边界处理 - 流星粒子重生，浮动粒子反弹
      if (particle.type === 'shooting') {
        if (particle.x < -50 || particle.x > canvas.width + 50 || 
            particle.y < -50 || particle.y > canvas.height + 50) {
          // 重新初始化流星
          particle.x = Math.random() * canvas.width
          particle.y = Math.random() * canvas.height
          particle.speedX = (Math.random() - 0.5) * 2.5
          particle.speedY = (Math.random() - 0.5) * 2.5
          particle.trail = []
          particle.life = 0
          particle.opacity = Math.random() * 0.8 + 0.4
        }
      } else {
        // 浮动粒子边界反弹
        if (particle.x < 0 || particle.x > canvas.width) {
          particle.speedX *= -0.8
          particle.x = Math.max(0, Math.min(canvas.width, particle.x))
        }
        if (particle.y < 0 || particle.y > canvas.height) {
          particle.speedY *= -0.8
          particle.y = Math.max(0, Math.min(canvas.height, particle.y))
        }
      }
      
      // 生命周期处理
      if (particle.life > 150) {
        particle.life = 0
        particle.opacity = Math.random() * 0.6 + 0.3
        particle.hue = Math.random() * 80 + 180
      }
      
      // 绘制流星轨迹（更流畅的渐变效果）
      if (particle.trail.length > 1 && particle.type === 'shooting') {
        ctx.save()
        
        // 创建轨迹路径
        ctx.beginPath()
        ctx.moveTo(particle.trail[0].x, particle.trail[0].y)
        
        for (let i = 1; i < particle.trail.length; i++) {
          const current = particle.trail[i]
          const prev = particle.trail[i - 1]
          
          // 使用二次贝塞尔曲线让轨迹更平滑
          const cpx = (current.x + prev.x) / 2
          const cpy = (current.y + prev.y) / 2
          ctx.quadraticCurveTo(prev.x, prev.y, cpx, cpy)
        }
        
        // 轨迹渐变效果
        const trailGradient = ctx.createLinearGradient(
          particle.trail[0].x, particle.trail[0].y,
          particle.x, particle.y
        )
        trailGradient.addColorStop(0, `hsla(${particle.hue}, 70%, 50%, 0)`)
        trailGradient.addColorStop(0.5, `hsla(${particle.hue}, 80%, 60%, ${particle.opacity * 0.3})`)
        trailGradient.addColorStop(1, `hsla(${particle.hue}, 90%, 70%, ${particle.opacity * 0.8})`)
        
        ctx.strokeStyle = trailGradient
        ctx.lineWidth = particle.size * 0.8
        ctx.lineCap = 'round'
        ctx.lineJoin = 'round'
        ctx.stroke()
        
        ctx.restore()
      }
      
      // 绘制浮动粒子的柔和轨迹
      if (particle.trail.length > 2 && particle.type === 'floating') {
        particle.trail.forEach((point, i) => {
          if (i === particle.trail.length - 1) return
          
          const progress = i / particle.trail.length
          const trailOpacity = progress * particle.opacity * 0.4
          const trailSize = particle.size * (0.3 + progress * 0.7)
          
          ctx.beginPath()
          ctx.arc(point.x, point.y, trailSize, 0, Math.PI * 2)
          ctx.fillStyle = `hsla(${particle.hue}, 70%, 65%, ${trailOpacity})`
          ctx.fill()
        })
      }
      
      // 绘制主粒子（带呼吸效果）
      const pulseIntensity = particle.type === 'shooting' ? 0.3 : 0.8
      const pulseSize = particle.size + Math.sin(particle.life * 0.08) * pulseIntensity
      
      // 主粒子光晕效果
      const glowSize = pulseSize * 2.5
      const glowGradient = ctx.createRadialGradient(
        particle.x, particle.y, 0,
        particle.x, particle.y, glowSize
      )
      glowGradient.addColorStop(0, `hsla(${particle.hue}, 90%, 80%, ${particle.opacity})`)
      glowGradient.addColorStop(0.4, `hsla(${particle.hue}, 80%, 70%, ${particle.opacity * 0.4})`)
      glowGradient.addColorStop(1, `hsla(${particle.hue}, 60%, 50%, 0)`)
      
      ctx.beginPath()
      ctx.arc(particle.x, particle.y, glowSize, 0, Math.PI * 2)
      ctx.fillStyle = glowGradient
      ctx.fill()
      
      // 主粒子核心
      ctx.beginPath()
      ctx.arc(particle.x, particle.y, pulseSize, 0, Math.PI * 2)
      ctx.fillStyle = `hsla(${particle.hue}, 95%, 85%, ${particle.opacity})`
      ctx.fill()
      
      // 连线效果（仅浮动粒子之间）
      if (particle.type === 'floating') {
        particles.forEach((other, otherIndex) => {
          if (index !== otherIndex && other.type === 'floating') {
            const dx = particle.x - other.x
            const dy = particle.y - other.y
            const distance = Math.sqrt(dx * dx + dy * dy)
            
            if (distance < 120) {
              const connectionOpacity = (120 - distance) / 120 * 0.15
              ctx.beginPath()
              ctx.moveTo(particle.x, particle.y)
              ctx.lineTo(other.x, other.y)
              ctx.strokeStyle = `hsla(${(particle.hue + other.hue) / 2}, 70%, 60%, ${connectionOpacity})`
              ctx.lineWidth = 0.5
              ctx.stroke()
            }
          }
        })
      }
    })
    
    animationId = requestAnimationFrame(animate)
  }
  
  createParticles()
  animate()
}


const roomIdInput = ref(null)// “加入房间”输入框的 DOM 引用

// 状态管理
const joinRoomId = ref('') // 用户手动输入的房间 ID
const searchQuery = ref('')// 房间列表搜索关键字
const showCreateModal = ref(false)// 是否显示“创建房间”弹窗
const isCreating = ref(false)// 创建房间时的 loading 状态
const isLoadingMore = ref(false) // “加载更多房间”时的 loading 状态

// 筛选器
const filters = reactive({
  playerCount: '',
  status: ''
})

// 创建房间表单
const createForm = reactive({
  name: '',
  maxPlayers: 4,
  description: '',
  isPrivate: false,
  password: '' // 私有房间密码
})

// 从后端API获取房间数据
const getRoomsFromAPI = async (page = 1, pageSize = 20) => {
  try {
    console.log(`请求房间列表: 第${page}页，每页${pageSize}条`)
    
    const response = await roomAPI.getRooms(page, pageSize)
    console.log('API返回的房间数据:', response)
    
    if (response.success) {
      const roomsData = response.data.rooms.map(room => ({
        id: room.roomId,
        name: room.roomName,
        description: '快来加入我们的涂色游戏吧！',
        background: '/images/casual-coloring.svg',
        playerCount: room.playerCount || 0,
        maxPlayers: room.maxPlayers || 4,
        status: room.status.toLowerCase() || 'waiting', // "Waiting" -> "waiting"
        players: [] // 玩家详情需要单独获取
      }))
      
      return {
        rooms: roomsData,
        totalPages: response.data.totalPages,
        totalCount: response.data.totalCount,
        currentPage: response.data.currentPage
      }
    }
    
    return { rooms: [], totalPages: 0, totalCount: 0 }
  } catch (error) {
    console.error('获取房间列表失败:', error)
    return { rooms: [], totalPages: 0, totalCount: 0 }
  }
}

// 获取房间列表数据
const getRoomsList = async (page = 1) => {
  const result = await getRoomsFromAPI(page)
  return result
}

// 主房间列表页面初次挂载时即注入
const rooms = ref([])
const isLoadingRooms = ref(false) // 房间列表加载状态
const currentPage = ref(1) // 当前页码
const totalPages = ref(1) // 总页数
const hasMoreRooms = ref(true) // 是否还有更多房间

// 加载房间列表
const loadRooms = async () => {
  isLoadingRooms.value = true
  try {
    console.log('开始加载房间列表...')
    const result = await getRoomsList(1) // 加载第一页
    rooms.value = result.rooms
    totalPages.value = result.totalPages
    currentPage.value = result.currentPage || 1
    hasMoreRooms.value = currentPage.value < totalPages.value
    console.log('房间列表加载完成:', rooms.value, `第${currentPage.value}页，共${totalPages.value}页`)
  } catch (error) {
    console.error('加载房间列表失败:', error)
  } finally {
    isLoadingRooms.value = false
  }
}

// 计算可用的房间数量（排除已满的房间）
const availableRoomsCount = computed(() => {
  return rooms.value?.filter(room => room.playerCount < room.maxPlayers)?.length || 0
})

// 计算过滤后的房间
const filteredRooms = computed(() => {
  let filtered = rooms.value

  // 按人数筛选
  if (filters.playerCount) {
    filtered = filtered.filter(room => room.maxPlayers == filters.playerCount)
  }

  // 按状态筛选
  if (filters.status) {
    filtered = filtered.filter(room => room.status === filters.status)
  }

  // 按搜索查询筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(room =>
      room.name.toLowerCase().includes(query) ||
      room.description.toLowerCase().includes(query)
    )
  }

  return filtered
})

 
/**
 * 快速匹配：
 * 1. 检查用户认证状态
 * 2. 找到第一个可用的房间（状态为waiting且未满）
 * 3. 调用API加入房间
 * 4. 如果没有可用房间，提示用户创建新房间
 */
const quickMatch = async () => {
  try {
    console.log('开始快速匹配...')
    
    // 检查用户认证状态
    if (!isAuthenticated) {
      alert('请先登录后再进行快速匹配')
      router.push('/auth/login')
      return
    }

    // 确保有用户信息
    if (!userInfo.username) {
      try {
        await userStore.fetchUserInfo()
      } catch (error) {
        console.error('获取用户信息失败:', error)
        alert('用户信息获取失败，请重新登录')
        router.push('/auth/login')
        return
      }
    }
    
    // 找到第一个有空位的waiting房间
    const availableRoom = rooms.value.find(room =>
      room.status === 'waiting' && room.playerCount < room.maxPlayers
    )

    if (availableRoom) {
      console.log('找到可用房间:', availableRoom)
      
      // 调用API加入房间
      const response = await roomAPI.joinRoom(availableRoom.id)
      
      if (response.success) {
        console.log('快速匹配成功:', response)
        // 跳转到房间页面
        router.push(`/room/${availableRoom.id}`)
      } else {
        alert(response.message || '加入房间失败')
        console.error('快速匹配失败:', response)
      }
    } else {
      // 没有可用房间，提示用户创建
      if (confirm('暂无可用房间，是否创建新房间进行匹配？')) {
        showCreateRoom()
      }
    }
  } catch (error) {
    console.error('快速匹配失败:', error)
    
    // 详细的错误处理
    if (error.response?.status === 400) {
      const errorMessage = error.response.data?.message || error.response.data?.Message || '房间已满或状态异常'
      alert('快速匹配失败: ' + errorMessage)
    } else if (error.response?.status === 401) {
      alert('登录已过期，请重新登录')
      userStore.logout()
      router.push('/auth/login')
    } else if (error.response?.status === 403) {
      alert('没有权限加入此房间')
    } else if (error.response?.status === 404) {
      alert('房间不存在，正在刷新房间列表...')
      // 刷新房间列表
      await loadRooms()
    } else {
      alert('快速匹配失败，请稍后重试')
    }
  }
}
/**
 * 加入指定房间：
 * 1. 检查房间状态
 * 2. 调用API加入房间
 * 3. 成功后跳转到房间页面
 */
const joinRoom = async (room) => {
  if (room.playerCount >= room.maxPlayers && room.status !== 'playing') {
    alert('房间已满')
    return
  }

  if (room.status === 'playing') {
    alert('游戏进行中，无法加入')
    return
  }

  try {
    console.log('正在加入房间:', room.id)
    
    // 调用API加入房间
    const response = await roomAPI.joinRoom(room.id)
    
    if (response.success) {
      console.log('成功加入房间:', response)
      // 跳转到房间页面
      router.push(`/room/${room.id}`)
    } else {
      alert(response.message || '加入房间失败')
    }
  } catch (error) {
    console.error('加入房间失败:', error)
    if (error.response?.status === 400) {
      alert(error.response.data?.message || '房间已满或不存在')
    } else if (error.response?.status === 403) {
      alert('没有权限加入此房间')
    } else {
      alert('加入房间失败，请稍后重试')
    }
  }
}

const joinSpecificRoom = async () => {
  if (!joinRoomId.value.trim()) {
    alert('请输入房间ID')
    return
  }

  // 检查用户认证状态
  if (!isAuthenticated) {
    alert('请先登录后再加入房间')
    router.push('/auth/login')
    return
  }

  try {
    const roomId = joinRoomId.value.trim()
    console.log('正在加入指定房间:', roomId)
    
    // 调用API加入房间
    const response = await roomAPI.joinRoom(roomId)
    
    if (response.success) {
      console.log('成功加入房间:', response)
      // 清空输入框
      joinRoomId.value = ''
      // 跳转到房间页面
      router.push(`/room/${roomId}`)
    } else {
      alert(response.message || '加入房间失败')
    }
  } catch (error) {
    console.error('加入房间失败:', error)
    if (error.response?.status === 404) {
      alert('房间不存在')
    } else if (error.response?.status === 400) {
      const errorMessage = error.response.data?.message || error.response.data?.Message || '房间已满或状态异常'
      alert('加入房间失败: ' + errorMessage)
    } else if (error.response?.status === 401) {
      alert('登录已过期，请重新登录')
      userStore.logout()
      router.push('/auth/login')
    } else if (error.response?.status === 403) {
      alert('没有权限加入此房间')
    } else {
      alert('加入房间失败，请稍后重试')
    }
  }
}
// 让“加入房间”输入框获得焦点
const focusRoomSearch = () => {
  roomIdInput.value?.focus()
}

// 测试用户认证状态 - 添加调试功能
const testUserAuth = () => {
  console.log('=== 用户认证状态测试 ===')
  console.log('isAuthenticated:', isAuthenticated)
  console.log('userInfo:', userInfo)
  console.log('token:', userStore.token)
  console.log('localStorage token:', localStorage.getItem('token'))
  console.log('sessionStorage token:', sessionStorage.getItem('token'))
  console.log('========================')
}

const showCreateRoom = () => {
  showCreateModal.value = true
}

const closeCreateModal = () => {
  showCreateModal.value = false
  // 重置表单
  Object.assign(createForm, {
    name: '',
    maxPlayers: 4,
    description: '',
    isPrivate: false,
    password: ''
  })
}
/**
 * 创建房间：
 * 1. 检查用户认证状态
 * 2. 验证表单数据
 * 3. 调用API创建房间
 * 4. 成功后跳转到房间页面
 */
const createRoom = async () => {
  isCreating.value = true
  try {
    // 检查用户认证状态
    if (!isAuthenticated) {
      alert('请先登录后再创建房间')
      router.push('/auth/login')
      isCreating.value = false
      return
    }

    // 确保有用户信息
    if (!userInfo.username) {
      try {
        await userStore.fetchUserInfo()
      } catch (error) {
        console.error('获取用户信息失败:', error)
        alert('用户信息获取失败，请重新登录')
        router.push('/auth/login')
        isCreating.value = false
        return
      }
    }

    // 验证表单数据
    if (createForm.isPrivate && !createForm.password) {
      alert('请为私有房间设置密码！')
      isCreating.value = false
      return
    }
    if (createForm.isPrivate && createForm.password.trim() === '') {
      alert('请为私有房间设置密码！')
      isCreating.value = false
      return
    }

    console.log('正在创建房间...', createForm)

    const payload = {
      roomName: createForm.name,
      maxPlayers: createForm.maxPlayers,
      isPrivate: createForm.isPrivate,
      password: createForm.isPrivate ? createForm.password : undefined,
      gameMode: "classic", // 默认游戏模式
      mapSize: 1000, // 默认地图大小
      gameDuration: 180 // 默认游戏时长（3分钟）
    }

    console.log('创建房间请求数据:', payload)
    console.log('当前用户认证状态:', isAuthenticated)
    console.log('当前用户信息:', userInfo)
    console.log('当前token:', userStore.token)
    
    const res = await roomAPI.createRoom(payload)
    console.log('创建房间响应:', res)
    
    // 兼容响应拦截器直接返回data的情况
    if (res && res.success) {
      const roomId = res.data?.RoomId || res.data?.roomId || res.data?.id
      if (roomId) {
        console.log('房间创建成功，房间ID:', roomId)
        // 关闭模态框
        showCreateModal.value = false
        // 刷新房间列表
        await loadRooms()
        // 跳转到房间页面
        router.push(`/room/${roomId}`)
      } else {
        alert('创建房间成功但未返回房间ID！')
      }
    } else {
      // 详细错误提示
      const errorMessage = res?.message || res?.Message || '创建房间失败'
      alert('创建房间失败: ' + errorMessage)
      console.error('创建房间失败:', res)
    }
  } catch (error) {
    console.error('创建房间失败:', error)
    
    // 详细的错误处理
    if (error?.response?.status === 401) {
      alert('登录已过期，请重新登录')
      userStore.logout()
      router.push('/auth/login')
    } else if (error?.response?.status === 400) {
      const errorMessage = error.response.data?.message || error.response.data?.Message || '请求参数错误'
      alert('创建房间失败: ' + errorMessage)
    } else if (error?.response?.data?.message) {
      alert('创建房间失败: ' + error.response.data.message)
    } else if (error?.message) {
      alert('创建房间失败: ' + error.message)
    } else {
      alert('创建房间失败，请稍后重试')
    }
  } finally {
    isCreating.value = false
  }
}

const loadMoreRooms = async () => {
  if (!hasMoreRooms.value || isLoadingMore.value) {
    return
  }

  isLoadingMore.value = true

  try {
    const nextPage = currentPage.value + 1
    console.log(`加载第${nextPage}页房间...`)
    
    const result = await getRoomsList(nextPage)
    
    if (result.rooms.length > 0) {
      // 追加新房间到现有列表
      rooms.value.push(...result.rooms)
      currentPage.value = result.currentPage || nextPage
      totalPages.value = result.totalPages
      hasMoreRooms.value = currentPage.value < totalPages.value
      
      console.log(`成功加载${result.rooms.length}个新房间，当前第${currentPage.value}页，共${totalPages.value}页`)
    } else {
      hasMoreRooms.value = false
      console.log('没有更多房间了')
    }
  } catch (error) {
    console.error('加载更多房间失败:', error)
  } finally {
    isLoadingMore.value = false
  }
}

onMounted(async () => {
  // 测试用户认证状态
  testUserAuth()
  
  // 初始化动态背景
  initDynamicBackground()
  
  // 检查用户认证状态
  if (!userStore.isAuthenticated) {
    console.warn('用户未认证，跳转到登录页面')
    router.push('/auth/login')
    return
  }

  // 获取用户信息
  if (!userStore.userInfo.username) {
    try {
      console.log('获取用户信息...')
      await userStore.fetchUserInfo()
      console.log('用户信息获取成功:', userStore.userInfo)
    } catch (e) {
      console.error('获取用户信息失败:', e)
      // 如果获取用户信息失败，可能是token过期
      userStore.logout()
      router.push('/auth/login')
      return
    }
  }
  
  // 加载房间列表
  await loadRooms()
  
  console.log('大厅页面加载完成，用户:', userStore.userInfo.username)
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
})
</script>

<style scoped>
/* ================ 全局容器样式 ================ */
.lobby-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 25%, #2d3748 50%, #1e3a5f 75%, #0f172a 100%);
  position: relative;
  overflow-x: hidden;
}

/* ================ 动态背景系统 ================ */
.background-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.floating-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.8) 0%, transparent 70%);
  border-radius: 50%;
  animation: particleFloat 15s infinite ease-in-out;
}

.particle:nth-child(odd) {
  animation-duration: 20s;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.6) 0%, transparent 70%);
}

.particle:nth-child(3n) {
  animation-duration: 25s;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.7) 0%, transparent 70%);
}

@keyframes particleFloat {
  0%, 100% {
    transform: translateY(100vh) translateX(0px) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(90vh) translateX(10px) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(10vh) translateX(-10px) scale(1);
  }
  100% {
    transform: translateY(0vh) translateX(0px) scale(0);
    opacity: 0;
  }
}

.light-beams {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.beam {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.15), transparent);
  opacity: 0.4;
}

.beam-1 {
  width: 200%;
  height: 2px;
  top: 20%;
  left: -50%;
  transform: rotate(15deg);
  animation: beamSweep1 12s infinite ease-in-out;
}

.beam-2 {
  width: 150%;
  height: 1px;
  top: 60%;
  left: -25%;
  transform: rotate(-10deg);
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.2), transparent);
  animation: beamSweep2 15s infinite ease-in-out;
}

.beam-3 {
  width: 180%;
  height: 1px;
  top: 80%;
  left: -40%;
  transform: rotate(5deg);
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.15), transparent);
  animation: beamSweep3 18s infinite ease-in-out;
}

@keyframes beamSweep1 {
  0%, 100% { transform: translateX(-100%) rotate(15deg); opacity: 0; }
  50% { transform: translateX(100%) rotate(15deg); opacity: 0.4; }
}

@keyframes beamSweep2 {
  0%, 100% { transform: translateX(-100%) rotate(-10deg); opacity: 0; }
  50% { transform: translateX(100%) rotate(-10deg); opacity: 0.6; }
}

@keyframes beamSweep3 {
  0%, 100% { transform: translateX(-100%) rotate(5deg); opacity: 0; }
  50% { transform: translateX(100%) rotate(5deg); opacity: 0.3; }
}

/* ================ 导航栏样式 ================ */
.navbar {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-icon {
  font-size: 2rem;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
  animation: logoGlow 3s infinite ease-in-out;
}

@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5)); }
  50% { filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.8)); }
}

.logo-text {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, #fff 0%, #e0e7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.nav-buttons {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  padding: 0.75rem 1.5rem;
  border-radius: 16px;
  transition: all 0.3s ease;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.nav-btn.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
  border-color: rgba(59, 130, 246, 0.5);
  color: #fff;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
}

.nav-indicator {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-btn.active .nav-indicator {
  width: 100%;
}

.nav-icon {
  font-size: 1.4rem;
  margin-bottom: 0.25rem;
}

.nav-text {
  font-size: 0.9rem;
  font-weight: 600;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-avatar-wrapper {
  position: relative;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(59, 130, 246, 0.5);
  transition: all 0.3s ease;
}

.avatar-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4, #3b82f6);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  animation: avatarRotate 3s linear infinite;
}

.user-avatar-wrapper:hover .avatar-glow {
  opacity: 0.6;
}

@keyframes avatarRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.username {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}

.settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: rotate(90deg);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.settings-btn svg {
  width: 20px;
  height: 20px;
}

.auth-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.login-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.login-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.register-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  color: #fff;
}

.register-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

/* ================ 主内容区域 ================ */
.main-content {
  position: relative;
  z-index: 10;
  padding: 3rem 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ================ 快速操作区域 ================ */
.quick-actions-section {
  margin-bottom: 5rem;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.action-card {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.action-card:hover {
  transform: translateY(-5px);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.action-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.action-card:hover .action-background {
  opacity: 1;
}

.action-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.action-icon svg {
  width: 28px;
  height: 28px;
  color: #fff;
}

.action-content {
  position: relative;
  z-index: 2;
}

.action-content h3 {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
}

.action-content p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #3b82f6;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.action-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.action-card:hover .action-btn svg {
  transform: translateX(4px);
}

.join-room-input {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.room-id-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  color: #fff;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.room-id-input:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.room-id-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.join-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.join-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
}

/* ================ 房间列表区域 ================ */
.rooms-section {
  margin-bottom: 3rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2.5rem;
  gap: 2rem;
}

.header-left {
  flex: 1;
}

.section-info {
  margin-top: 0.5rem;
}

.info-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(59, 130, 246, 0.2);
  color: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-icon {
  font-size: 1rem;
}

.header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.filter-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.filter-group, .search-group {
  position: relative;
}

.filter-select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  appearance: none;
  min-width: 140px;
  transition: all 0.3s ease;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

.filter-select:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-select option {
  background: #1a1f2e;
  color: #fff;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 1rem;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.5);
  z-index: 2;
}

.search-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  color: #fff;
  font-size: 0.9rem;
  width: 220px;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  width: 260px;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* ================ 加载动画 ================ */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.loading-animation {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 2rem;
}

.loading-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-radius: 50%;
  animation: loadingSpin 1.5s linear infinite;
}

.loading-ring:nth-child(1) {
  border-top-color: #3b82f6;
  animation-delay: 0s;
}

.loading-ring:nth-child(2) {
  border-top-color: #10b981;
  animation-delay: -0.5s;
  transform: scale(0.8);
}

.loading-ring:nth-child(3) {
  border-top-color: #8b5cf6;
  animation-delay: -1s;
  transform: scale(0.6);
}

@keyframes loadingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1rem;
  margin: 0;
  animation: textPulse 2s infinite ease-in-out;
}

@keyframes textPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ================ 房间卡片 ================ */
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1.5rem;
}

.room-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.room-card:hover {
  transform: translateY(-3px);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.room-card.room-full {
  opacity: 0.6;
  cursor: not-allowed;
}

.room-card.room-playing {
  border-color: rgba(245, 158, 11, 0.3);
}

.room-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.3;
}

.bg-particles {
  position: relative;
  width: 100%;
  height: 100%;
}

.bg-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.6) 0%, transparent 70%);
  border-radius: 50%;
  animation: bgParticleFloat 8s infinite ease-in-out;
}

.bg-particle:nth-child(odd) {
  animation-duration: 12s;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, transparent 70%);
}

@keyframes bgParticleFloat {
  0%, 100% {
    transform: translate(0, 0) scale(0.5);
    opacity: 0.3;
  }
  50% {
    transform: translate(20px, -15px) scale(1);
    opacity: 0.8;
  }
}

.room-status {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 10;
}

.room-status.waiting {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(29, 78, 216, 0.9) 100%);
  color: #fff;
}

.room-status.playing {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.9) 0%, rgba(217, 119, 6, 0.9) 100%);
  color: #fff;
}

.status-icon {
  font-size: 1rem;
}

.room-info {
  position: relative;
  z-index: 5;
}

.room-name {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.room-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
}

.players-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.players-list {
  display: flex;
  gap: 0.5rem;
}

.player-slot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.player-slot.filled {
  background: rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.5);
}

.player-slot.empty {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.player-avatar svg {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.8);
}

.player-count {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-size: 0.9rem;
}

.room-footer {
  position: relative;
  z-index: 5;
}

.join-room-btn {
  width: 100%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.join-room-btn:hover:not(.disabled) {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
}

.join-room-btn.disabled {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
}

.btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
}

.btn-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.join-room-btn:hover:not(.disabled) .btn-icon {
  transform: translateX(2px);
}

.btn-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #10b981, #059669, #06b6d4, #10b981);
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: btnGlowRotate 3s linear infinite;
  z-index: 1;
}

.join-room-btn:hover:not(.disabled) .btn-glow {
  opacity: 0.3;
}

@keyframes btnGlowRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ================ 空状态 ================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.empty-animation {
  position: relative;
  margin-bottom: 2rem;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.3));
}

.empty-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.empty-ring {
  position: absolute;
  border: 2px solid transparent;
  border-radius: 50%;
  animation: emptyRingRotate 3s linear infinite;
}

.empty-ring:nth-child(1) {
  width: 80px;
  height: 80px;
  border-top-color: rgba(59, 130, 246, 0.5);
  animation-delay: 0s;
}

.empty-ring:nth-child(2) {
  width: 100px;
  height: 100px;
  border-top-color: rgba(16, 185, 129, 0.3);
  animation-delay: -1s;
  animation-direction: reverse;
}

.empty-ring:nth-child(3) {
  width: 120px;
  height: 120px;
  border-top-color: rgba(139, 92, 246, 0.4);
  animation-delay: -2s;
}

@keyframes emptyRingRotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.empty-title {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
}

.empty-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0 0 2rem 0;
  max-width: 400px;
}

.empty-action-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border: none;
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.empty-action-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.empty-action-btn svg {
  width: 16px;
  height: 16px;
}

/* ================ 加载更多 ================ */
.load-more-section {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.load-more-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 0.75rem 2rem;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.load-more-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.load-more-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.loading-dots {
  display: flex;
  gap: 0.25rem;
}

.dot {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: dotBounce 1.4s infinite ease-in-out;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
.dot:nth-child(3) { animation-delay: 0s; }

@keyframes dotBounce {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.no-more-rooms {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.completion-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(16, 185, 129, 0.2);
  color: rgba(255, 255, 255, 0.9);
  padding: 0.75rem 1.5rem;
  border-radius: 20px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.completion-icon {
  font-size: 1.1rem;
}

/* ================ 创建房间模态框样式 ================ */
/* 模态框过渡动画 */
.modal-enter-active,
.modal-leave-active {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .modal-content,
.modal-leave-to .modal-content {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  opacity: 1;
}

.modal-content {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 0;
  width: 100%;
  max-width: 380px;
  max-height: fit-content;
  overflow: visible;
  position: relative;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: scale(1) translateY(0);
}

/* 模态框背景特效 */
.modal-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 24px;
}

.modal-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  animation: modalGlow 8s ease-in-out infinite;
}

@keyframes modalGlow {
  0%, 100% { opacity: 0.3; transform: rotate(0deg) scale(1); }
  50% { opacity: 0.6; transform: rotate(180deg) scale(1.1); }
}

.modal-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.modal-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: linear-gradient(45deg, rgba(59, 130, 246, 0.6), rgba(139, 92, 246, 0.4));
  border-radius: 50%;
  animation: modalParticleFloat 6s ease-in-out infinite;
}

.modal-particle:nth-child(odd) {
  animation-duration: 8s;
  background: linear-gradient(45deg, rgba(16, 185, 129, 0.5), rgba(59, 130, 246, 0.3));
}

@keyframes modalParticleFloat {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(0.8);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-20px) translateX(10px) scale(1.2);
    opacity: 0.8;
  }
}

/* 模态框头部 */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.25rem 0.75rem 1.25rem;
  position: relative;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-title-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.modal-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  animation: modalIconPulse 3s ease-in-out infinite;
}

@keyframes modalIconPulse {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    transform: scale(1.05);
  }
}

.modal-icon svg {
  width: 24px;
  height: 24px;
}

.modal-title {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.modal-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  transform: rotate(90deg) scale(1.1);
}

.modal-close svg {
  width: 20px;
  height: 20px;
}

/* 表单样式 */
.create-form {
  padding: 0.75rem 1.25rem 1.25rem 1.25rem;
  position: relative;
  z-index: 10;
  overflow: visible;
}

/* 移除滚动条样式 - 不再需要 */

.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.label-icon {
  font-size: 1.1rem;
  filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.3));
}

.label-text {
  flex: 1;
}

.required-star {
  color: #ef4444;
  font-weight: bold;
}

.optional-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  font-weight: 400;
}

/* 输入框样式 */
.input-wrapper {
  position: relative;
}

.form-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 14px;
  padding: 0.875rem 1rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.form-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 
    0 0 0 3px rgba(59, 130, 246, 0.15),
    0 6px 24px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}

.input-focus-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  pointer-events: none;
  transition: all 0.3s ease;
}

.form-input:focus + .input-focus-border {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

/* 人数选择器 */
.player-count-selector {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 14px;
  padding: 0.625rem;
  gap: 0.625rem;
  backdrop-filter: blur(10px);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.count-btn {
  background: rgba(59, 130, 246, 0.2);
  border: 2px solid rgba(59, 130, 246, 0.4);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(5px);
}

.count-btn:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.4);
  border-color: rgba(59, 130, 246, 0.8);
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.count-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.count-btn svg {
  width: 16px;
  height: 16px;
}

.count-display {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem;
}

.count-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #60a5fa;
  text-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.count-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 500;
}

/* 文本域样式 */
.textarea-wrapper {
  position: relative;
}

.form-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 14px;
  padding: 0.875rem 1rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  resize: vertical;
  min-height: 70px;
  max-height: 100px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  font-family: inherit;
  backdrop-filter: blur(10px);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.form-textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 
    0 0 0 3px rgba(59, 130, 246, 0.15),
    0 6px 24px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}

.textarea-focus-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  pointer-events: none;
  transition: all 0.3s ease;
}

.form-textarea:focus + .textarea-focus-border {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

.char-count {
  position: absolute;
  bottom: 0.5rem;
  right: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  pointer-events: none;
}

/* 隐私设置 */
.privacy-toggle-section {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.privacy-header {
  margin-bottom: 1rem;
}

.privacy-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
}

.privacy-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.privacy-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.privacy-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.privacy-option.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

.option-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.privacy-option.active .option-icon {
  background: rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}

.option-icon svg {
  width: 20px;
  height: 20px;
}

.option-content {
  flex: 1;
}

.option-content h4 {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
}

.option-content p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.4;
}

.option-check {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.privacy-option.active .option-check {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

.option-check svg {
  width: 14px;
  height: 14px;
}

/* 密码输入过渡动画 */
.password-input-enter-active,
.password-input-leave-active {
  transition: all 0.3s ease;
}

.password-input-enter-from,
.password-input-leave-to {
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
}

.password-input-enter-to,
.password-input-leave-from {
  opacity: 1;
  transform: translateY(0);
  max-height: 120px;
}

.password-input-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 操作按钮 */
.form-actions {
  display: flex;
  gap: 0.875rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cancel-btn,
.create-btn {
  border: none;
  border-radius: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.cancel-btn {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.2);
  padding: 0.875rem 1.25rem;
  font-size: 0.9rem;
  backdrop-filter: blur(10px);
}

.cancel-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 15px rgba(255, 255, 255, 0.1);
}

.create-btn {
  flex: 1;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  color: #fff;
  border: 2px solid transparent;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  box-shadow: 
    0 6px 24px rgba(59, 130, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.create-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 32px rgba(59, 130, 246, 0.4),
    0 0 0 3px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.create-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.create-btn.loading {
  pointer-events: none;
}

.btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  position: relative;
  z-index: 2;
}

.btn-spinner {
  width: 20px;
  height: 20px;
  color: currentColor;
}

.btn-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-text {
  font-weight: 600;
  letter-spacing: 0.5px;
}

.create-btn:hover:not(:disabled) .btn-icon {
  transform: rotate(90deg) scale(1.1);
}

.btn-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4, #3b82f6);
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: btnGlowRotate 3s linear infinite;
  z-index: 1;
  border-radius: 12px;
}

.create-btn:hover:not(:disabled) .btn-glow {
  opacity: 0.3;
}

@keyframes btnGlowRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ================ 响应式设计 ================ */
@media (max-width: 1024px) {
  .container {
    padding: 0 1.5rem;
  }
  
  .section-header {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .filter-controls {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .nav-content {
    padding: 0 1rem;
  }
  
  .nav-buttons {
    gap: 1rem;
  }
  
  .nav-btn {
    padding: 0.5rem 1rem;
  }
  
  .nav-text {
    display: none;
  }
  
  .actions-grid {
    grid-template-columns: 1fr;
  }
  
  .rooms-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-controls {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }
  
  .filter-select,
  .search-input {
    width: 100%;
  }
  
  .search-input:focus {
    width: 100%;
  }
  
  .modal-content {
    margin: 1rem;
    padding: 1.5rem;
  }
  
  .modal-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }
  
  .logo-text {
    font-size: 1.4rem;
  }
  
  .username {
    display: none;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .action-card {
    padding: 1.5rem;
  }
  
  .room-card {
    padding: 1rem;
  }
  
  .modal-content {
    margin: 0.5rem;
    padding: 1rem;
  }
}

/* ================ 深色模式增强 ================ */
@media (prefers-color-scheme: dark) {
  .lobby-page {
    background: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 25%, #2d3748 50%, #1e3a5f 75%, #0f172a 100%);
  }
}

/* ================ 减少动画偏好 ================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================ 高对比度模式 ================ */
@media (prefers-contrast: high) {
  .lobby-page {
    background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
  }
  
  .feature-card,
  .action-card,
  .room-card {
    border-color: rgba(255, 255, 255, 0.3);
  }
  
  .nav-btn,
  .filter-select,
  .search-input,
  .form-input {
    border-color: rgba(255, 255, 255, 0.4);
  }
}

/* ================ 滚动条样式 ================ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}

/* ================ 选择文本样式 ================ */
::selection {
  background: rgba(59, 130, 246, 0.3);
  color: #fff;
}

::-moz-selection {
  background: rgba(59, 130, 246, 0.3);
  color: #fff;
}

/* ================ 焦点可见性 ================ */
.nav-btn:focus-visible,
.cta-button:focus-visible,
.action-card:focus-visible,
.join-room-btn:focus-visible,
.modal-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}


.nav-buttons {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.nav-btn.active {
  background: rgba(76, 175, 80, 0.3);
  color: #4CAF50;
}

.nav-btn.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(76, 175, 80, 0.2);
  border-radius: 12px;
  z-index: -1;
}

.nav-icon {
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}

.nav-text {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.logo h1 {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
}


.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-info .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 2px solid #667eea;
}

.user-info .username {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}

.btn-icon {
  padding: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  text-decoration: none;
  font-size: 1.2rem;
  color: #fff;
  transition: all 0.3s ease;
}

.btn-icon:hover {
  color: #ffd700;
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.main-content {
  padding: 2rem 0;
}

.quick-actions-section {
  margin-bottom: 3rem;
}

.action-card {
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.action-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.action-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
}

.action-content h3 {
  color: #fff;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.action-content p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.action-btn {
  margin-top: auto;
}

.join-room-input {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.join-room-input .form-input {
  flex: 1;
  margin-bottom: 0;
}

.form-input option {
  color: #1e3c72;
}

.rooms-section {
  margin-bottom: 2rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 0;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1rem;
}

.section-title {
  color: #fff;
  font-size: 1.8rem;
  margin: 0;
  font-weight: 700;
}

.section-info {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}

.header-right {
  display: flex;
  align-items: center;
}

.filter-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.filter-dropdown {
  position: relative;
}

.filter-select {
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.9rem;
  min-width: 120px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  padding-right: 32px;
}

.filter-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.filter-select option {
  color: #1e3c72;
}

.search-box {
  position: relative;
}

.search-input {
  padding: 10px 16px 10px 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.9rem;
  width: 200px;
  min-width: 180px;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-box::before {
  content: '🔍';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.search-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.rooms-grid {
  gap: 1.5rem;
}

.room-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 300px;
  padding: 0;
}

.room-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.room-card.room-full {
  opacity: 0.7;
}

.room-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background-size: cover;
  background-position: center;
  background-color: rgba(102, 126, 234, 0.3);
}

.room-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
}

.room-status {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 10;
}

.room-status.waiting {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.room-status.playing {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.room-info {
  position: relative;
  padding: 1.5rem;
  margin-top: 150px;
  height: calc(100% - 150px);
  display: flex;
  flex-direction: column;
}

.room-name {
  color: #fff;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.room-description {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  flex: 1;
}

.players-list {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.player-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.player-avatar.empty {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

.room-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.room-stats {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

.join-btn {
  padding: 8px 16px;
  font-size: 0.9rem;
}

.btn-disabled {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
}

.btn-disabled:hover {
  transform: none;
}

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: rgba(255, 255, 255, 0.8);
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.loading-spinner {
  position: relative;
  width: 60px;
  height: 60px;
  margin-bottom: 1.5rem;
}

.spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}

.spinner-ring:nth-child(1) {
  border-top-color: #4CAF50;
  animation-delay: 0s;
}

.spinner-ring:nth-child(2) {
  border-top-color: #2196F3;
  animation-delay: -0.5s;
  transform: scale(0.8);
}

.spinner-ring:nth-child(3) {
  border-top-color: #FF9800;
  animation-delay: -1s;
  transform: scale(0.6);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1rem;
  margin: 0;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.empty-state h3 {
  color: #fff;
  margin-bottom: 1rem;
}

.empty-state p {
  margin-bottom: 2rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.load-more-section {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  padding: 1rem;
}

.no-more-rooms {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  padding: 1rem;
  text-align: center;
}

.no-more-rooms p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
  margin: 0;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.load-more-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.load-more-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.load-icon {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.load-more-btn:disabled .load-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ================ 响应式设计 ================ */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 0.5rem;
  }
  
  .modal-content {
    max-width: 100%;
    max-height: fit-content;
    width: 100%;
  }
  
  .modal-header {
    padding: 1rem 1rem 0.75rem 1rem;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
  }
  
  .modal-title-section {
    flex: 1;
  }
  
  .modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }
  
  .create-form {
    padding: 1rem 1rem 1.25rem 1rem;
  }
  
  .privacy-options {
    gap: 0.5rem;
  }
  
  .privacy-option {
    padding: 0.75rem;
    gap: 0.75rem;
  }
  
  .option-icon {
    width: 36px;
    height: 36px;
  }
  
  .option-content h4 {
    font-size: 0.9rem;
  }
  
  .option-content p {
    font-size: 0.8rem;
  }
  
  .form-actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .player-count-selector {
    padding: 0.75rem;
  }
  
  .count-number {
    font-size: 1.25rem;
  }


@media (max-width: 480px) {
  .modal-overlay {
    padding: 0.5rem;
  }
  
  .modal-title {
    font-size: 1.5rem;
  }
  
  .modal-icon {
    width: 40px;
    height: 40px;
  }
  
  .modal-icon svg {
    width: 20px;
    height: 20px;
  }
  
  .form-group {
    margin-bottom: 1.25rem;
  }
  
  .privacy-toggle-section {
    padding: 1rem;
  }
}
}
</style>
